<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" label-position="right" label-width="auto">
        <h4 class="ml10 title_2">法人客户综合查询</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="custName">
              <el-input
                v-model="queryParams.custName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码类型" prop="certType">
              <el-select
                v-model="queryParams.certType"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in certTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" prop="certNo">
              <el-input
                v-model="queryParams.certNo"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户类别(行业)" prop="custClass">
              <el-select
                v-model="queryParams.custClass"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in custClassOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属行业一级/二级/三级/四级" prop="industry">
              <el-select
                v-model="queryParams.industry"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in custClassOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否分支机构" prop="isBranch">
              <el-select
                v-model="queryParams.isBranch"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in custScaleOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户类别(规模)" prop="custClassTypeGm">
              <el-select
                v-model="queryParams.custClassTypeGm"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in custScaleOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在省/市/区县" prop="address">
              <el-cascader
                v-model="queryParams.address"
                :options="addressOptions"
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营状态" prop="custScale">
              <el-select
                v-model="queryParams.custScale"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in custScaleOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="存潜标识" prop="label">
              <el-select
                v-model="queryParams.label"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in labelOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否清单式管理" prop="isList">
              <el-select
                v-model="queryParams.isList"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in isListOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户VIP编码" prop="VIP">
              <el-input
                v-model="queryParams.VIP"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="业务属性" prop="affiliation">
            <CheckboxGroup v-model:values="checkboxValues" :options="affiliationOptions"/>
          </el-form-item>
        </el-row>
        <el-row justify="center">
            <el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-row>
      </el-form>

      <div class="ml10">
        <span class="title_2">法人客户列表</span>
        <div class="mb10 pull-right">
          <el-button plain type="primary" icon="Plus" @click="toAddCust">客户新增</el-button>
          <el-button plain type="primary" icon="StarFilled" @click="toMyFollowing">我关注的客户</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
      >
        <el-table-column label="序号" align="center" type="index" min-width="80"/>
        <el-table-column label="标识" align="center" prop="label" min-width="150" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="isShowLabel(scope.row,1)">
              <svg-icon icon-class="tag_1"/>
            </span>
            <span v-if="isShowLabel(scope.row,2)">
              <svg-icon icon-class="tag_2"/>
            </span>
            <span v-if="isShowLabel(scope.row,3)">
              <svg-icon icon-class="tag_3"/>
            </span>
            <span v-if="isShowLabel(scope.row,4)">
              <svg-icon icon-class="tag_10"/>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" width="150" :show-overflow-tooltip="true">
          <template #default="{ row }">
            <el-button link type="primary" @click="toCustDetails">{{ row.custName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" align="center" prop="custType" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="业务归属" align="center" prop="affiliation" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="总部管理处室" align="center" prop="sections" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="证件号码类型" align="center" prop="certType" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="证件号码" align="center" prop="certNo" :show-overflow-tooltip="true"/>
        <el-table-column label="经营状态" align="center" prop="jyzt" :show-overflow-tooltip="true"/>
        <el-table-column label="所属行业一级" align="center" prop="industryOne" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所属行业二级" align="center" prop="industryTwo" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所属行业三级" align="center" prop="industryThree" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所属行业四级" align="center" prop="industryFour" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所在省" align="center" prop="province" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所在市" align="center" prop="area" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="所在区" align="center" prop="city" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="客户类别(规模)" align="center" prop="guimo" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="客户类别(行业)" align="center" prop="hangye" min-width="150" :show-overflow-tooltip="true"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
<script setup name="MyFollowing">
import { reactive, toRaw, toRefs } from 'vue';
import CheckboxGroup from '@/components/CheckboxGroup';
import useCustAddOrEditStore from '@/store/modules/custAddOrEdit'

const router = useRouter();

const loading = ref(false)
const tableList = ref([])
const total = ref(0)
const queryRef = ref(null)
  
const toCustDetails = ()=>{
    router.push({
      path: '/customer/details'
    })
}

let checkboxValues = reactive(['1'])
const queryParams = reactive({
  custName: '',
  certType: '',
  certNo: '',
  custClass: '',
  industry: '',
  isBranch: '',
  custClassTypeGm: '',
  custScale: '',
  address: '',
  isList: '',
  VIP: '',
  affiliation: [],
  pageNum: 1,
  pageSize: 10,
})
const certTypeOptions = ref([
  { label: '统一社会信用代码', value: 1 },
  { label: '组织机构代码', value: 2 },
])
const custClassOptions = ref([
  { label: '全部', value: 1 },
])
const custScaleOptions = ref([
  { label: '全部', value: 1 },
])

const addressOptions = ref([
  {
    label: '北京市',
    value: '0000010',
    children: [
      {
        label: '市辖区',
        value: '0000354',
        children: [
          {
            label: '东城区',
            value: '00000397',
            children: []
          },
          {
            label: '海淀区',
            value: '00000398',
            children: []
          },
          {
            label: '朝阳区',
            value: '00000399',
            children: []
          },
        ]
      }
    ],
  },
  {
    label: '上海市',
    value: '0000002',
    children: [],
  },
  {
    label: '山西省',
    value: '0000001',
    children: [],
  }
])
const isListOptions = ref([
  { label: '全部', value: 'all' },
  { label: '是', value: '1' },
  { label: '否', value: '0' },
])
const labelOptions = ref([
  { label: '全部', value: 'all' },
  { label: '存客', value: '1' },
  { label: '潜客', value: '2' },
])
const affiliationOptions = ref([
  { label: '全部', value: 'all' },
  { label: '团车', value: '1' },
  { label: '非车', value: '2' },
  { label: '重客', value: '3' },
  { label: '企客', value: '4' },
  { label: '三航', value: '5' },
])

const handleQuery = () => {
  getList()
}
const getList = () => {
  queryParams.affiliation = checkboxValues.filter(i => i !== 'all')
  loading.value = true
  setTimeout(() => {
    tableList.value = [
      {
        label: [1,2],
        custName: '中国建筑工程有限公司',
        custType: '独立主体',
        certType: '统一社会信用代码',
        certNo: 'XXXXXXXXXXXXXX',
        P02Code: 'XXXXXXXXXXX',
        affiliation: '团客，重客',
        jyzt: '存续',
        province: '湖北省',
        area: '武汉市',
        city: '江岸区',
        sections: '企业客户部',
        industryOne: '建筑业',
        industryTwo: '房屋建筑业',
        industryThree: '住宅房屋建筑',
        industryFour: '住宅房屋建筑',
        guimo: '国内500强',
        hangye: '建筑工程客户',
        isFocus: true,
      },
      {
        label: [3,4],
        custName: '中国建筑工程有限公司',
        custType: '独立主体',
        certType: '统一社会信用代码',
        certNo: 'XXXXXXXXXXXXXX',
        P02Code: 'XXXXXXXXXXX',
        affiliation: '团客，重客',
        jyzt: '存续',
        province: '湖北省',
        area: '武汉市',
        city: '江岸区',
        sections: '企业客户部',
        industryOne: '建筑业',
        industryTwo: '房屋建筑业',
        industryThree: '住宅房屋建筑',
        industryFour: '住宅房屋建筑',
        guimo: '国内500强',
        hangye: '建筑工程客户',
        isFocus: true,
      },
      {
        label: [1,2,3,4],
        custName: '中国建筑工程有限公司',
        custType: '独立主体',
        certType: '统一社会信用代码',
        certNo: 'XXXXXXXXXXXXXX',
        P02Code: 'XXXXXXXXXXX',
        affiliation: '团客，重客',
        jyzt: '存续',
        province: '湖北省',
        area: '武汉市',
        city: '江岸区',
        sections: '企业客户部',
        industryOne: '建筑业',
        industryTwo: '房屋建筑业',
        industryThree: '住宅房屋建筑',
        industryFour: '住宅房屋建筑',
        guimo: '国内500强',
        hangye: '建筑工程客户',
        isFocus: true,
      },
    ]
      total.value = Number(tableList.value.length)
      loading.value = false
  }, 300)
}
const isShowLabel = (row,label) => {
  return row.label.includes(label)
}
const toAddCust = () => {
  useCustAddOrEditStore().$reset()
  router.push({ path: '/customer/edit' });
}
const toMyFollowing = () => {
  router.push({ path: '/workbench/myFollowing' });
}
const resetQuery = (formEl) => {
  formEl.resetFields()
  handleQuery()
}
const handleCheck = (row) => {
  console.log(row)
}
const handleFocus = (row) => {
  loading.value = true
  setTimeout(() => {
    row.isFocus = !row.isFocus
    loading.value = false
  }, 300);
}
getList()
</script>
  
<style lang="scss" scoped>
</style>
  